/**
 * @author wanggang
 * @param url 访问此url得到后台的进度信息 ，
 * @param callBack 操作完成之后的回调函数
 * @param ready 准备生成进度条信息的第一个调用的方法
 * 
 */
aeroui.waiting = function( url , callBack , ready ){
	this.url = url || aeroui.waiting.constant.URL;
	this.callBack = callBack || aeroui.waiting.constant.CALLBACK;
	this.ready = ready || aeroui.waiting.constant.READY;
	// 初始化DOM节点，此处初始化的有DOM的结构与DOM的位置
	this.init();
	// 向后台请求操作信息与进度信息
	this.getProcessInfo();
}
/**
 * 进度条所要用到的常量
 */
aeroui.waiting.constant = {
	// 产生进度信息的URL
	URL : 'baseAction!getProcessInfo.action',
	// 100%之后的默认回调
	CALLBACK : function(){},
	// 初始化完成之后第一个调用的方法
	READY : function(){},
	// 对后台轮询的时间间隔
	INTERVAL : 100,
	// 操作信息的前缀
	INFOPREFIX : '当前操作: ',
	// 进度条的空白图片
	LOADIMG : 'common/js/waiting/img/percentImage.gif',
	// 进度条背景
	LOADBACKGROUND_1 : 'common/js/waiting/img/percentImage_back4.gif',
	LOADBACKGROUND_2 : 'common/js/waiting/img/percentImage_back3.gif',
	LOADBACKGROUND_3 : 'common/js/waiting/img/percentImage_back2.gif',
	LOADBACKGROUND_4 : 'common/js/waiting/img/percentImage_back1.gif'
};
/**
 * 每50ms做一次轮询
 * 从后台取出进度信息
 * 在后台的session中放置相关信息
 * operateInfo : '操作信息'
 * processInfo : '15%' 如果processInfo的value为100%就表示操作已完成，就不再去后台轮询
 */
aeroui.waiting.prototype.getProcessInfo = function(){
	var that = this;
	var HANDLE = window.setInterval( function(){
		$.getJSON( aeroui.waiting.constant.URL+'?temp='+Math.random() , function( data ){
			// 在此处的data就是一个JSON格式的数据
			// JSON中的有两个key值,分别是operateInfo表示操作信息，processInfo表示百分比信息
			var operateInfo = data.operateInfo;
			var processInfo = data.processInfo;
			// 把进度信息与百分比信息放到指定的DOM位置
			// 放置操作信息
			$( '#aeroui_waiting_infoSpan' ).text( aeroui.waiting.constant.INFOPREFIX + operateInfo );
			// 放置百分比信息 
			$( '#aeroui_waiting_percentSpan' ).text( processInfo );
			// 设置进度条图片的背景
			var backGroundImg = that.getBackGroundImg( processInfo );
			var backGroundPos = that.getBackGroundPos( processInfo );
			$( '#aeroui_waiting_loadImg' ).css( {
				backgroundPosition : backGroundPos + 'px' + ' 50%',
				backgroundImage : 'url( '+ backGroundImg +' )'
			} );
			
			// 如果进度为-1就不再进行轮询操作
			if( new Number( processInfo ) == -1 ){
				window.clearInterval( HANDLE );
				// 调用方法消失进度条
				that.hide();
			}
			// 消毁js对象
			processInfo = null;
			operateInfo = null;
			backGroundImg = null;
			backGroundPos = null;
			data.operateInfo = null;
			data.processInfo = null;
			data = null;
		} );
	} , aeroui.waiting.constant.INTERVAL );
	
}

/**
 * 隐藏进度信息
 * 此清除其中的信息
 */
aeroui.waiting.prototype.hide = function(){
	$( '#aeroui_waiting_infoSpan' ).text( null );
	$( '#aeroui_waiting_percentSpan' ).text( null );
	$( '#aeroui_waiting_loadImg' ).css( {
		backgroundImage : ''
	} );
	$( '#aeroui_waiting_div' ).css( {
		display : 'none'
	} );
	if(document.all){
		CollectGarbage();
	}
}

/**
 * 计算当前背景图片的位置
 */
aeroui.waiting.prototype.getBackGroundPos = function( processInfo ){
	// 此位置的算法为
	// 图片的width*-1 + 百分数 * 图片的width
	var process = new Number( new String( processInfo ).replace('%' , '') );
	var _width = $( '#aeroui_waiting_loadImg' ).width();
	return ( _width * -1 ) + ( process / 100 * _width );
}

/**
 * 按百分比返回图片
 * 0-25% 返回第一张
 * 25-50% 返回第二张
 * 50-75% 返回第三张
 * 75-100% 返回第四张
 */
aeroui.waiting.prototype.getBackGroundImg = function( processInfo ){
	var process = new Number( new String( processInfo ).replace('%' , '') );
	if( process >= 0 && process < 25 ){
		return aeroui.waiting.constant.LOADBACKGROUND_1;
	}else if( process >= 25 && process <50 ){
		return aeroui.waiting.constant.LOADBACKGROUND_2;
	}else if( process >=50 && process < 75 ){
		return aeroui.waiting.constant.LOADBACKGROUND_3;
	}else {
		return aeroui.waiting.constant.LOADBACKGROUND_4;
	}
}

/**
 * 初始化，生成进度条要的DOM节点
 */
aeroui.waiting.prototype.init = function(){
	// 取出进度信息的div,如果此div不存在就创建一个，如果已存在就使用此div
 	var _div = $( '#aeroui_waiting_div' );
 	if( _div.length ==0 ){
 		// 准备进度信息所要的DOM节点
 		this.readyWaiting();
	 	// 设置ul的位置
	 	var _width = $( '#aeroui_waiting_ul' ).width() / 2;
	 	var _height = $( '#aeroui_waiting_ul' ).height() / 2;
	 	// 居中
	 	$( '#aeroui_waiting_ul' ).css( {
	 		left : ( window.screen.width / 2 - _width ) + 'px',
	 		top : ( window.screen.height / 3 - _height ) + 'px'
	 	} );
 	}
 	// 设置容器div的样式为可见
 	var container = $( '#aeroui_waiting_div' );
 	$( container ).css( {
 		display : ''
 	} );
}

 /**
  * 准备产生进度信息所需要的DOM节点
  */
 aeroui.waiting.prototype.readyWaiting = function(){
 	_div = document.createElement( 'DIV' );
	// 设置表示唯一的div
	$( _div ).attr( 'id' , 'aeroui_waiting_div' );
	// 添加一个样式
	// 此处的样式中包含位置与透明度与div大小的定义
	$( _div ).addClass( 'aeroui_waiting_css' );
 	// 添加一个ul标记，其中的第一个li标记表示当前正在操作的状态，第二个li表示进度信息
 	var _ul = document.createElement( 'UL' );
 	// 添加_ul的样式，此样式包括定位到屏幕的中央，与list的样式 	$( _ul ).addClass( 'aeroui_waiting_ul_css' );
 	// 添加ul的唯一标识
 	$( _ul ).attr( 'id' , 'aeroui_waiting_ul' );
 	// 创建显示进度信息的li
 	var infoLi = document.createElement( 'LI' );
 	// 添加显示进度信息的li的样式
 	$( infoLi ).addClass( 'aeroui_waiting_ul_infoLi_css' );
 	// 创建用于显示后台返回的操作阶段的信息
 	var infoSpan = document.createElement( 'SPAN' );
 	// 添加显示后台信息的span的样式
 	$( infoSpan ).addClass( 'aeroui_waiting_ul_infoLi_infospan_css' );
 	// 添加显示信息的span的唯一id标示
 	$( infoSpan ).attr( 'id' , 'aeroui_waiting_infoSpan' );
 	// 把infoSpan添加到infoLi中
 	$( infoLi ).append( $( infoSpan ) );
 	// 把显示信息的li添加到ul
 	$( _ul ).append( $( infoLi ) );
 	//创建显示进度百分比的li
 	var loadLi = document.createElement( 'LI' );
 	// 添加显示进度百分比的li的样式
 	$( loadLi ).addClass( 'aeroui_waiting_ul_loadLi_css' );
 	// 创建用于显示进度条的span
 	var loadSpan = document.createElement( 'SPAN' );
 	// 添加进度条件信息的css样式
 	$( loadSpan ).addClass( 'aeroui_waiting_ul_loadSpan_css' );
 	// 添加一个空白的进度框
 	var loadImg = document.createElement( 'IMG' );
 	// 添加样式
 	$( loadImg ).addClass( 'aeroui_waiting_loadImg' );
 	// 添加空白的图片源
 	$( loadImg ).attr( 'src' , aeroui.waiting.constant.LOADIMG );
 	// 设置图片的唯一标识
 	$( loadImg ).attr( 'id' , 'aeroui_waiting_loadImg' );
 	// 把此图片添加到loadSpan中
 	$( loadSpan ).append( $( loadImg ) );
 	// 创建一个用于显示百分数的span
 	var percentSpan = document.createElement( 'SPAN' );
 	// 设置唯一标识
 	$( percentSpan ).attr( 'id' , 'aeroui_waiting_percentSpan' );
 	// 添加显示百分数的样式
 	$( percentSpan ).addClass( 'aeroui_waiting_loadSpan_percentSpan' );
 	// 添加到loadSpan
 	$( loadSpan ).append( $( percentSpan ) );
 	// 添加到loadLi
 	$( loadLi ).append( $( loadSpan ) );
 	// 添加到ul
 	$( _ul ).append( $( loadLi ) );
 	// 把ul添加到div
 	$( _div ).append( $( _ul ) );
 	// 把div添加到document.body
 	$( document.body ).append( $( _div ) );
 }